<template>
  <view class="contact-root">
    <map :scale="scale" @tap="tagClick" @markertap="markertap" id="map"
         ref="map" :latitude="latitude" :longitude="longitude"
         :style="'height:' + mapheight + 'px;width:750rpx'">
    </map>
    <view v-if="showInfo" class="contact-info">
      <view class="list-item-title-container title-content">{{ contactInfo.liaisonName }}</view>
      <view class="list-item-gl">
        <view class="gl-item">
          {{ contactInfo.liaisonDistance }}公里
        </view>
        <view class="rs-item">
          {{ contactInfo.memberCount }}位代表委员
        </view>
      </view>
      <view class="dh-item ">
        <view class="dz-text icon-container">
          <i-icon size="28rpx" name="phone-line"></i-icon>
          {{ contactInfo.contactPhone || '暂无' }}
        </view>
      </view>
      <view class="dz-item ">
        <view class="dz-text icon-container">
          <i-icon size="28rpx" name="map-pin-line"></i-icon>
          {{ contactInfo.liaisonAddress || '暂无' }}
        </view>
      </view>
      <button @click="goSubPage(`${contactDetailPath}?liaisonId=${contactInfo.id}`)" class="show-more">查看详情
        <uni-icons type="right" size="28rpx"></uni-icons>
      </button>
      <view class="decoration">
      </view>
      <view class="navigation-container">
        <button @click="navigation" class="card navigation">路线导航</button>
      </view>
    </view>
  </view>
</template>

<script>
import {mapMixins} from "@/pages/home/contact/mapMixins";

export default {
  mixins: [mapMixins],
  data() {
    const {
      windowHeight
    } = uni.getSystemInfoSync()
    return {
      showInfo: false,
      contactInfo: {
        liaisonName: '标题11111',
        liaisonDistance: '2.2公里',
        memberCount: '5',
        contactPhone: '15655880088',
        liaisonAddress: '海拉尔东路街道胜利西街南50米',
      },
      mapheight: windowHeight * 1,
      markerClickFlag: false,
    }
  },
  methods: {
    tagClick() {
      if (this.markerClickFlag) {
        this.markerClickFlag = false;
        return;
      }
      this.showInfo = false
    },
    addMarkerClusterClick() {
      this._mapContext.on('markerClusterClick', marks => {

      })
    },
    /**
     * 地图相关方法
     */
    markertap(mark) {
      this.markerClickFlag = true;
      this.showContactInfoByMarker(mark)
    },
    showContactInfoByMarker(mark) {
      let {detail: {markerId}} = mark;
      let currentMarker = this.markers.find(item => item.id === markerId)
      if (currentMarker.markerType !== 'contact') return;
      this.contactInfo = currentMarker.contactInfo;
      this.showInfo = true
    },
    /**
     * 导航
     */
    navigation() {
      let {contactInfo: {latitude, longitude, liaisonName: name, address = ''}} = this
      uni.openLocation({
        latitude,
        longitude,
        name,
        address,
        scale: 18,
        success: function (res) {
        }
      })
    },
  },
}
</script>

<style>
.contact-root {
  width: 750rpx;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  z-index: 1;
}

.contact-info {
  box-sizing: border-box;
  width: calc(100% - 60rpx);
  height: max-content;
  left: 30rpx;
  padding: 30rpx 30rpx 0 30rpx;
  overflow: auto;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.list-item-title-container {
  width: 100%;
  margin-bottom: 25rpx;
  overflow: hidden;
}

.list-item-gl, .dz-item, .dh-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 25rpx;
}

.gl-item, .rs-item {
  font-weight: normal;
  font-size: 28rpx;
  color: #222222;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: 30rpx;
}

.dz-text {
  font-weight: normal;
  font-size: 28rpx;
  color: #707070;
  text-align: left;
  font-style: normal;
  text-transform: none;
  align-items: flex-start !important;
}

.dz-text i-icon {
  position: relative;
  top: 4rpx;
}

.show-more {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 28rpx;
  color: #707070;
  margin: 25rpx 0;
}

.decoration {
  width: 100%;
  height: 2rpx;
  border-bottom: 1rpx solid #E5E5E5;
}

.navigation-container {
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navigation {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
}
</style>
